<!DOCTYPE html>
<html lang="zh-CN" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>09.v-bind的简化写法</title>
</head>
<body>
<div id="app">
    <img :title="msg" :width="size"
         src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1183421147,2593560592&fm=26&gp=0.jpg"/>
    <br>
    <input type="button" value="改变图片width属性" @click="editWidth">
    <input type="button" value="改变图片title属性" @click="editTitle">
</div>
<script src="js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg:"没有描述",
            size:"50%"
        },
        methods: {
            editWidth(){
                this.size = "20%"
            },
            editTitle(){
                this.msg = "动漫头像"
            }
        }
    })
</script>
</body>
</html>